<template>
	<view>



		<view class="flex-row justify-between group_2">
			<image class="image_8"
				src="https://ide.code.fun/api/image?token=65e956a6eb5b550011331ec7&name=0724664571e15e798ceaa8ece412c25f.png" />
			<image class="image_8 image_9"
				src="https://ide.code.fun/api/image?token=65e956a6eb5b550011331ec7&name=058ba6e483f16601c8a633f96234cc44.png" />
		</view>



	</view>
	<view class="flex-col page">
		<view class="flex-col flex-1 group_3">
			<view class="flex-col justify-start items-center self-start text-wrapper">
				<text class="text">Hi Hedy! Dizy here!</text>
			</view>
			<view class="flex-col self-stretch group_4">
				<image class="self-center image_15"
					src="https://ide.code.fun/api/image?token=65e956a6eb5b550011331ec7&name=465c7c9217c2df0e5f1dd47ccb1915d0.png" />
				<view class="mt-28 flex-col self-stretch">
					<text class="self-center text_2 text_3">Dizy is Here!</text>
					<text class="self-stretch font text_4 mt-15">
						Type then send your first message and start have some fun with Dizy!
					</text>
				</view>
			</view>
			<view class="flex-row self-stretch group_5">
				<view class="flex-col justify-start items-start flex-1 relative text-wrapper_2">
					<text class="font text_2 text_5">Type a message ...</text>
				</view>
				<view class="flex-col justify-start items-center shrink-0 image-wrapper_2 ml-15">
					<image class="image_16"
						src="https://ide.code.fun/api/image?token=65e956a6eb5b550011331ec7&name=8421bfab1ac1b4d3204e01c1a7693e68.png" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	.toppicture {
		left: 128.7px;
		top: 44.77px;
		width: 118.83px;
		height: 128.23px;
		opacity: 1;

	}

	.image_7 {
		width: 20rpx;
		height: 48rpx;
	}

	.pos_3 {
		position: absolute;
		right: 356.52rpx;
		top: 117.28rpx;
	}

	.section_3 {
		padding-bottom: 6rpx;
		background-image: url('https://ide.code.fun/api/image?token=65e956a6eb5b550011331ec7&name=63cecd1f4966be7650bd5f36dd1d82d8.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 174rpx;
	}

	.pos_5 {
		position: absolute;
		left: 50%;
		top: 161.38rpx;
		transform: translateX(-50%);
	}

	.image_10 {
		width: 132rpx;
		height: 164rpx;
	}

	.image_11 {
		width: 150rpx;
		height: 56rpx;
	}

	.pos_6 {
		position: absolute;
		left: 0;
		top: 21.44rpx;
	}

	.image_13 {
		width: 116rpx;
		height: 54rpx;
	}

	.pos_8 {
		position: absolute;
		left: 50%;
		top: 42.04rpx;
		transform: translateX(-50%);
	}

	.image_14 {
		width: 90rpx;
		height: 42rpx;
	}

	.pos_9 {
		position: absolute;
		right: 14.1rpx;
		bottom: 8.06rpx;
	}

	.image_5 {
		opacity: 0.25;
		filter: blur(140rpx);
		width: 236rpx;
		height: 256rpx;
	}

	.pos {
		position: absolute;
		left: 50%;
		bottom: 50.46rpx;
		transform: translateX(-50%);
	}

	.section {
		padding: 72rpx 0 144rpx;
		filter: drop-shadow(0rpx 8rpx 120rpx #a9a9a91a);
		background-image: url('https://ide.code.fun/api/image?token=65e956a6eb5b550011331ec7&name=85435f9b1673ec225a8017d48d78a61e.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.group_2 {
		margin-left: 42rpx;
		margin-right: 30rpx;
		padding: 0 8rpx;
	}

	.image_8 {
		width: 56rpx;
		height: 56rpx;
	}

	.image_9 {
		margin-right: 12rpx;
	}

	.mt-15 {
		margin-top: 30rpx;
	}

	.ml-15 {
		margin-left: 30rpx;
	}

	.page {
		background-color: #fafafa;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.group_3 {
		padding: 0 50rpx;
		overflow-y: auto;
	}

	.text-wrapper {
		padding: 34.36rpx 0 27.64rpx;
		background-color: #ffffff;
		box-shadow: 0rpx 20rpx 160rpx #a9a9a91a;
		width: 374rpx;
	}

	.text {
		color: #323438;
		font-size: 32rpx;
		font-family: NunitoSans;
		line-height: 60.8rpx;
		width: 250rpx;
	}

	.group_4 {
		margin-top: 248rpx;
		padding-left: 84.92rpx;
		padding-right: 69.08rpx;
	}

	.image_15 {
		width: 96rpx;
		height: 96rpx;
	}

	.font {
		font-size: 28rpx;
		font-family: NunitoSans;
		line-height: 54rpx;
	}

	.text_2 {
		width: 216rpx;
	}

	.text_3 {
		color: #323438;
		font-size: 40rpx;
		font-family: NunitoSans;
		font-weight: 700;
		line-height: 58rpx;
		text-align: center;
	}

	.text_4 {
		color: #32343899;
		text-align: center;
	}

	.group_5 {
		margin-top: 342.62rpx;
	}

	.text-wrapper_2 {
		padding: 33.48rpx 0 28.52rpx;
		background-color: #ffffff;
		border-radius: 40rpx;
		box-shadow: 0rpx 8rpx 240rpx #a9a9a91f;
		height: 116rpx;
	}

	.text_5 {
		margin-left: 40.34rpx;
		color: #a9a9a999;
	}

	.image-wrapper_2 {
		padding: 32rpx 0;
		background-color: #2dcbd0;
		border-radius: 40rpx;
		box-shadow: 0rpx 8rpx 240rpx #a9a9a91a;
		width: 116rpx;
		height: 116rpx;
	}

	.image_16 {
		width: 52rpx;
		height: 52rpx;
	}
</style>